<template>
  <div
    v-if="show"
    :class="[
      'toast-notification',
      type === 'success' ? 'toast-success' : 'toast-error',
    ]"
  >
    {{ message }}
  </div>
</template>

<script setup>
// Props
defineProps({
  show: {
    type: Boolean,
    default: false
  },
  message: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'success',
    validator: (value) => ['success', 'error'].includes(value)
  }
});
</script>

<style scoped>
.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  color: white;
  z-index: 9999;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 14px;
}

.toast-success {
  background: #34c759;
}

.toast-error {
  background: #ff3b30;
}
</style> 